
<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                    <el-row>
                        <!-- 类型名称 -->
                        <el-col :span="5">
                            <el-form-item :label="$t('ImportTask.queryLabel.className')"   :label-width="queryformLabelWidth">
                                <el-input v-model.trim="formQueryCondition.className.val" class="queryItemStyle" clearable
                                        :placeholder="$t('ImportTask.queryLabel.placeholderClassName')">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 状态 -->
                        <el-col :span="5" :offset="1">
                            <el-form-item :label="$t('ImportTask.queryLabel.status')"   :label-width="queryformLabelWidth">
                                <!-- <el-input v-model.trim="formQueryCondition.status.val" class="queryItemStyle" clearable
                                        :placeholder="$t('ImportTask.queryLabel.placeholderStatus')">
                                </el-input> -->
                                <el-select v-model="formQueryCondition.status.val" class="queryItemStyle">
                                    <el-option :label="$t('label.all')" value=""></el-option>
                                    <el-option :label="$t('ImportTask.label.accepted')" value="1"></el-option>
                                    <el-option :label="$t('ImportTask.label.executing')" value="2"></el-option>
                                    <el-option :label="$t('ImportTask.label.finish')" value="0"></el-option>
                                    <el-option :label="$t('ImportTask.label.exception')" value="3"></el-option>
                                    <!-- <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                    v-for="drug in statusData"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 创建时间起 -->
                        <el-col :span="5" :offset="1">
                            <el-form-item :label="$t('ImportTask.queryLabel.startTime')" :label-width="queryformLabelWidth" >
                                <el-date-picker v-model.trim="formQueryCondition.startTime.val" class="queryItemStyle"
                                clearable :placeholder="$t('queryLabel.selectOp')" type="date" value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <!-- 创建时间止 -->
                        <el-col :span="5" :offset="1">
                            <el-form-item :label="$t('ImportTask.queryLabel.endTime')" :label-width="queryformLabelWidth">
                                <el-date-picker v-model.trim="formQueryCondition.endTime.val" class="queryItemStyle"
                                clearable :placeholder="$t('queryLabel.selectOp')" type="date" value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <div style="text-align:right">
                                <el-form-item>
                                    <!-- 重置 -->
                                    <el-button v-permission="{menuCode: menuCode, resourceCode: 'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item> -->
                                    <!-- 查询 -->
                                    <el-button v-permission="{menuCode: menuCode, resourceCode: 'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="dataBox" ref="dataBox">

                <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                    <el-table v-if="isInit" ref="singleTable"
                                :data="tableData"
                                :height="tableHeight"
                                @sort-change="sortChange"
                                v-loading="loading" size="mini"
                                style="width: 100%;" stripe=stripe border=border>
                        <el-table-column type="index"  width="50" fixed="left"
                                            :label="$t('table.xh')" align="center">
                        </el-table-column>
                        <el-table-column :label="$t('table.op')" fixed="left" min-width="130">
                            <template slot-scope="scope">
                                <el-button size="gv" icon="el-icon-delete" v-permission="{menuCode: menuCode, resourceCode: 'downErrorBtnText'}"
                                            type="danger" :loading="loading" @click="downError(scope.$index, scope.row,'downErrorBtnText')"
                                            >{{ $t('ImportTask.btnText.downErrorBtnText') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="className" min-width="280" fixed="left"
                                            :label="$t('ImportTask.table.className')" sortable="custom" sort-by="className">
                        </el-table-column>
                        <el-table-column prop="status" min-width="100"
                                            :label="$t('ImportTask.table.status')" sortable="custom" sort-by="status">
                        </el-table-column>
                        <el-table-column prop="sucCount" min-width="100"
                                            :label="$t('ImportTask.table.sucCount')" sortable="custom" sort-by="sucCount">
                        </el-table-column>
                        <el-table-column prop="errCount" min-width="100"
                                            :label="$t('ImportTask.table.errCount')" sortable="custom" sort-by="errCount">
                        </el-table-column>
                        <el-table-column prop="execStartTime" min-width="180"
                                            :label="$t('ImportTask.table.execStartTime')" sortable="custom" sort-by="execStartTime">
                        </el-table-column>
                        <el-table-column prop="execEndTime" min-width="180"
                                            :label="$t('ImportTask.table.execEndTime')" sortable="custom" sort-by="execEndTime">
                        </el-table-column>

                        <el-table-column :label="$t('ImportTask.table.creationDate')" min-width="180" sortable="custom" prop="createdDate" sort-by="creationDate">
                        </el-table-column>
                        <el-table-column :label="$t('ImportTask.table.creationBy')" min-width="120" sortable="custom" prop="creator" sort-by="creationBy">
                        </el-table-column>

                    </el-table>
                </transition>

            </div>
        </div>
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>

  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'Log',
  props: {
    menuCode: String
  },
  data () {

    return {
        queryformLabelWidthLong:"100px",
        isInit:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        statusData:[],
        modelName:"com.ispr.imports.entity.ImportTask",
        // 查询条件
        formQueryCondition: {
            className: {
              key:'className',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            status: {
              key:'status',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            startTime: {
              key:'creationDate',
              group:'startTime',
              val: '', // 查询的值
              op:'>='
            },
            endTime: {
              key:'creationDate',
              group:'endTime',
              val: '', // 查询的值
              op:'<='
            },
        },
        // 排序对象
            sort: {
                key: "creationDate",
                dir: "Desc"
            },

    }
  },
  methods:{

     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.className.val = "";
        this.formQueryCondition.status.val = "";
        this.formQueryCondition.startTime.val = "";
        this.formQueryCondition.endTime.val = "";
    },

    downError:function downError (scope, row, rescode) {
      this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      this.downloadByIdOrName(this, '/import/downerr', 'taskId', row.keyId, row.errFileName);
    },

    // 为状态下拉框赋值
    findStatus: function() {
        this.findByTypeCode("10016",this.setStatus)
    },
    // 查询状态下拉框数据成功后的回调
    setStatus: function(isSuccess,json) {
        try{
            if (isSuccess) {
                this.statusData = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.statusData.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },

    initTable:function(){
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },
    enterDown(){
      var g = this
      if(!g.loading){
          g.onQuery()
      }
    }


  },
  mounted: function mounted() {
    // this.findStatus();
    this.onQuery();
    window.setTimeout(this.initTable,100);
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

